<template>
	<view>
		<top-tabbar @backClick="backClick" backColor="#5B2177"></top-tabbar>
		<view class="get-pass-box">
			<view class="pass-title">忘记密码</view>
			<view class="account">
				<view class="account-title">登陆账号</view>
				<input placeholder="请输入手机号"
				 placeholder-style="font-size: 12px;color:#999999;padding-left: 5px;"
				 v-model="fromData.userAccount"
				 maxlength="11"
				 type="number"
				 placeholder-class/>
			</view>
			<view class="account">
				<view class="account-title">验证码</view>
				<view class="get-code-input">
					<input placeholder="请输入验证码"
					v-model="fromData.smsVerifyCode"
					 placeholder-style="font-size: 12px;color:#999999;padding-left: 5px;"
					 maxlength="4"
					 type="number"
					 @input="inputCode"
					 placeholder-class/>
					<view class="code-name" @click="getSmsVerify" v-if="showbtn">{{code_ts}}</view>
					<view class="code-name" v-else style="color: #999999;">{{code_ts}}</view>
				</view>
			</view>
			<view class="account">
				<view class="account-title">登录密码</view>
				<input placeholder="请输入6-8位密码"
				 maxlength="8"
				 v-model="fromData.newPwd"
				 @input="inputCode"
				 placeholder-style="font-size: 12px;color:#999999;padding-left: 5px;"
				 placeholder-class/>
			</view>
			<view class="account">
				<view class="account-title">确认密码</view>
				<input placeholder="请再次输入密码"
				v-model="fromData.affirmPwd"
				maxlength="8"
				@input="inputCode"
				 placeholder-style="font-size: 12px;color:#999999;padding-left: 5px;"
				 placeholder-class/>
			</view>
			<view class="btn-set" @click="affirmSet">确定更改</view>
		</view>
	</view>
</template>

<script>
	import topTabbar from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
	import  md5  from '@/components/md5/md5.js' 
	export default {
		components: { topTabbar },
		data() {
			return {
				code_ts: '获取验证码', //倒计时提示文字
				sec: 60, // 倒计时秒数
				showbtn: true, // 展示获取验证码或倒计时按钮判断
				fromSms: { // 发短信参数
					mobile: "",
					mobileCountry: "CN",
					type: "REGISTER"
				},
				fromData: { // 修改密码参数
					userAccount:"",
					newPwd: "",
					smsVerifyCode: "",
					affirmPwd: ''
				}
			}
		},
		methods:{
			// 确认改密码
			async affirmSet() {
				if(!this.verify()) return false
				if(this.fromData.affirmPwd !== this.fromData.newPwd) {
					uni.showToast({title: "俩次输入的密码不一致", icon:'none'})
					return false
				}
				const parame = {
					userAccount: this.fromData.userAccount,
					newPwd: md5(this.fromData.newPwd),
					smsVerifyCode: this.fromData.smsVerifyCode
				}
				const res = await $POST("/boke-user/user/retrievePwd",parame)
				if (res.code === "0000000") {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					uni.showToast({title: "注册成功", icon:'none', duration: "3000"})
				}
			},
			// 获取短信验证码
			getSmsVerify() {
				if (!this.fromData.userAccount) {
					uni.showToast({title: "请输入手机号", icon:'none'})
					return false; 
				}
				this.getyzcode()
				this.fromSms.mobile = this.fromData.userAccount
			 $GET('/boke-user/sms/changeSendSmsFlag',{sendSms:"N"}).then(res => {
				  $POST('/boke-user/sms/sendSms',this.fromSms).then(res => {
						this.fromData.smsVerifyCode = "8888"
					})
			 })	
			},
			// 60秒倒计时
			getyzcode () {
			  let timer = setInterval(() => {
					this.sec = this.sec-1
					this.code_ts = this.sec + 'S后重试'
					this.showbtn = false
					if (this.sec === 0) {
							clearInterval(timer)
							this.sec = 60
							this.code_ts = "获取验证码"
							this.showbtn = true
					}
				}, 1000)
			},
			// 验证
			verify() {
				if (!this.fromData.userAccount) {
					uni.showToast({title: "请输入手机号码", icon:'none'})
					return false
				}
				if(!(/^1[3456789]\d{9}$/.test(this.fromData.userAccount))){
					uni.showToast({ title: "手机号码不正确",	icon:'none'});     
					return false; 
				}
				if (!this.fromData.smsVerifyCode) {
					uni.showToast({title: "请输入验证码", icon:'none'})
					return false
				}
				if (!this.fromData.newPwd || !this.fromData.affirmPwd) {
					uni.showToast({title: "请输入密码", icon:'none'})
					return false
				}
				if (this.fromData.newPwd.length < 6 || this.fromData.affirmPwd.length < 6) {
					uni.showToast({title: "密码长度不能少于6位", icon:'none'})
					return false
				}
				return true
			},
			// 验证码inpout事件
			inputCode(e) {
				if(!(/^[a-zA-Z0-9_]{1,}$/.test(e.detail.value))){
					uni.showToast({title: "只能输入字母与数字", icon:'none'})
					return false
				}
			},
			// 返回上一页
			backClick() {
				uni.navigateTo({
				  url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.get-pass-box{
		padding: 0 26rpx;
		background-color: #FFFFFF;
		.pass-title{
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			padding: 40rpx 0 103rpx 0;
		}
		.account{
			width: 100%;
			height: 140rpx;
			border-bottom: 1px solid  #F2F2F2;
			margin-bottom: 24rpx;
			.get-code-input{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right:40rpx;
				.code-name{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B43CEC;
				}
			}
			.account-title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 30rpx;
			}
			/deep/ .input-placeholder{
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-left: 5px;
			}
		}
		.btn-set{
			width: 540rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			margin-top: 129rpx;
		}
	}
</style>
